import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import router from '@/router'
// process.env.NODE_ENV === 'development' // npm run dev
// process.env.NODE_ENV === 'production' // npm run build:pro
// 生产环境 /pro-api
// 开发环境 /api
// let baseURL = ''
// 判断生产环境和开发环境 重新给baseURL赋值
// if (process.env.NODE_ENV === 'development') {
//   baseURL = '/api'
// } else {
//   baseURL = '/pro-api'
// }
// axios的实例
const service = axios.create({
  // 配置项目根路径  会向本机发请求
  baseURL: process.env.VUE_APP_BASE_API,
  // 请求超时时间
  timeout: 5000
})

// 添加请求拦截器  发送ajax从后台获取数据(判断token失效)
// 请求拦截器主要功能: 对token进行统一的在请求头配置
service.interceptors.request.use(function(config) {
  // if (!(config.url === '/api/sys/login')) {
  //   // 说明是非登录接口, 要统一设置请求头
  //   // TODO..
  // }
  const token = store.getters.token
  // 判断有无token, 有token就配置请求头
  if (token) {
    config.headers['Authorization'] = 'Bearer ' + token

    // config.headers = {
    //   Authorization: 'Bearer ' + token
    // }
  }
  // 会不会存在一种可能, 登录页面也会有token存在呢?
  // ①有token是打不开登录页面的
  // ②如果我退出了, 会跳转到登录页, 这个时候token肯定被我们清除了
  // 在发送请求之前做些什么
  return config
}, function(error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
// 两个功能: ①统一对axios拿到的数据进行解构, 后续的请求就不需要解构, 直接用
//          ②对全局的axios错误进行统一的弹框管理
service.interceptors.response.use(
  // 第一个函数触发时机: 只要数据请求成功(服务器返回数据)
  // 请求成功分2种情况 ①一切OK ②请求的数据是有问题的, 比如密码错误, 账号错误
  function(res) {
    // 解构 success,data,message
    const { success, data, message } = res.data
    // 成功的话, 就把真实的数据return出去
    if (success) {
      return data
    } else {
      // 成功拿到了数据, 但是出现了数据错误, 比如密码错误, 账号错误
      // 进行弹框提示
      // 还想让这个错误被后续的catch捕获
      Message.error(message)
      return Promise.reject(new Error(message))
    }
  },
  // 第二个函数触发时机: 网路错误, 地址错误, token过期(network是红色的)
  function(error) {
    // 有的时候出现的红色错误, 返回值是没有response属性的
    // token过期, 伪造的token都是这个报错信息
    if (error.response?.data?.code === 10002) {
      // token过期就清空vuex的token,用户信息, 清空本地存储的数据
      store.commit('user/REMOVE_TOKEN')
      store.commit('user/REMOVE_USERINFO')
      Message.error('token失效, 将在3秒后跳转到登录页!')
      setTimeout(() => {
        router.push('/login')
      }, 3000)
    } else {
      // catch捕获的就是network红色错误
    // err拿到的是网络错误信息对象, 里面也有一个浏览器给我们的属性message
      Message.error(error.message)
    }
    // Promise.reject() 都会被后续的axios的catch捕获
    return Promise.reject(error)
  })

// 导出axios实例对象
export default service

// const obj = {
//   name: 'zs'
// }
// obj.age = 20
// console.log(obj) // {name: 'zs', age: 20}

// obj = {
//   age: 20
// }
// console.log(obj) // {age: 20}
